<template>
    <div id="container" class="max-w-[1440px] mx-auto bg-primary-300 text-white min-h-screen pt-12"> 
        <div id="main" class="bg-primary-300 p-6 text-black">
            <!-- 标题区域 -->
            <div class="rounded bg-white mx-4 my-4 py-6">
                <div class="px-6">
                    <h1 class="text-lg font-semibold">收藏的电影</h1>
                </div>
            </div>

            <!-- 导航和内容区域 -->
            <div class="rounded bg-white mx-4 mt-4 py-6"> 
                <PersonalNav/>
                
                <!-- 收藏列表区域 -->
                <div class="px-6 mt-4">
                    <!-- 加载状态 -->
                    <div v-if="loading" class="flex justify-center items-center h-40">
                        <LoadingSpinner />
                    </div>

                    <!-- 空状态 -->
                    <div v-else-if="!movies.length" class="flex flex-col items-center justify-center py-10 bg-gray-50 rounded-lg">
                        <div class="text-gray-500 mb-4">暂无收藏电影</div>
                        <router-link 
                            to="/" 
                            class="text-blue-500 hover:text-blue-600 transition-colors duration-200"
                        >
                            去首页发现更多电影
                        </router-link>
                    </div>

                    <!-- 电影列表 -->
                    <div v-else class="space-y-4">
                        <div 
                            v-for="movie in movies" 
                            :key="movie.id" 
                            class="flex bg-gray-50 rounded-lg overflow-hidden hover:bg-gray-100 transition-colors duration-200"
                        >
                            <!-- 电影海报 -->
                            <div class="w-40 h-56 flex-shrink-0">
                                <img 
                                    :src="movie.image_url || '/src/assets/images/nopicture.jpg'" 
                                    :alt="movie.movie_name"
                                    class="w-full h-full object-cover"
                                    referrerpolicy="no-referrer"
                                >
                            </div>

                            <!-- 电影信息 -->
                            <div class="flex flex-col justify-between p-4 flex-grow h-56">
                                <div>
                                    <!-- 电影标题和评分 -->
                                    <div class="flex justify-between items-start mb-2">
                                        <router-link 
                                            :to="{ name: 'MovieDetail', params: { id: movie.id }}"
                                            class="text-lg font-medium text-blue-600 hover:text-blue-800"
                                        >
                                            {{ movie.movie_name }}
                                        </router-link>
                                        <span v-if="movie.rate" class="text-orange-500 text-lg">
                                            {{ movie.rate }}分
                                        </span>
                                    </div>

                                    <!-- 电影详情 -->
                                    <div class="text-gray-600 space-y-1">
                                        <p>年份：{{ movie.release_year || '未知' }}</p>
                                        <p>导演：{{ movie.director || '未知' }}</p>
                                        <p>主演：{{ movie.actors || '未知' }}</p>
                                        <p>类型：{{ movie.types || '未知' }}</p>
                                
                                    </div>
                                </div>

                                <!-- 操作按钮 -->
                                <div class="flex justify-end">
                                    <button 
                                        @click="handleRemoveCollect(movie.id)"
                                        class="px-4 py-2 text-white bg-red-500 hover:bg-red-600 rounded transition-colors duration-200"
                                    >
                                        取消收藏
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCollectList, removeCollect } from '@/api/collect'
import { showToast } from '@/utils/toast'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'

// 状态
const movies = ref([])
const loading = ref(false)
const total = ref(0)

// 获取收藏列表
const fetchCollectList = async () => {
    try {
        loading.value = true
        const response = await getCollectList()
        
        const { code, message, data } = response.data
        if (code === 200 && data) {
            movies.value = data.items
            total.value = data.total
        } else {
            showToast(message || '获取收藏列表失败', 'error')
        }
    } catch (error) {
        console.error('获取收藏列表失败:', error)
        showToast('获取收藏列表失败', 'error')
    } finally {
        loading.value = false
    }
}

// 处理取消收藏
const handleRemoveCollect = async (movieId) => {
    try {
        const response = await removeCollect(movieId)
        const { code, message } = response.data
        
        if (code === 200) {
            showToast('取消收藏成功', 'success')
            // 重新获取列表
            await fetchCollectList()
        } else {
            showToast(message || '取消收藏失败', 'error')
        }
    } catch (error) {
        console.error('取消收藏失败:', error)
        showToast('取消收藏失败', 'error')
    }
}


// 初始化
onMounted(() => {
    fetchCollectList()
})
</script>

